<template>
  <div class="chain">
    <div class="chain__search">
      <input
        type="text"
        :placeholder="focus ? '' : 'Please input chain name'"
        v-model="search"
        @focus="focus = true"
        @blur="focus = false"
      />
    </div>
    <div
      class="chain__item g-clickable-small"
      v-for="(item, i) in filterList"
      :key="i"
      :class="{ on: item.chainCode === chainCode }"
      @click="$emit('select', item)"
    >
      <img :src="item.chainIcon" />
      <span>{{ item.chainName }}</span>
    </div>
  </div>
</template>

<script>
import { ChainList } from "@/config/chain";
export default {
  props: {
    chainCode: {
      type: String,
      default: "",
    },
    chainList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      focus: false,
      search: "",
    };
  },
  computed: {
    list() {
      if (this.chainList && this.chainList.length) {
        return this.chainList;
      }

      return ChainList.filter((item) => {
        return !item.disabled;
      });
    },
    filterList() {
      if (!this.search) return this.list;

      const reg = new RegExp(this.search, "gi");
      return this.list.filter((item) => {
        const { chainName, chainCode } = item;
        return reg.test(chainName) || reg.test(chainCode);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chain {
  height: 100%;
  width: 340px;
  padding: 0 0 30px;
  overflow: auto;
  box-sizing: border-box;

  &__search {
    padding: 0 20px;
    margin: 0 20px;
    height: 46px;
    border-radius: 46px;
    background: var(--card);
    box-sizing: border-box;

    display: flex;
    align-items: center;
    margin-bottom: 10px;

    input {
      width: 100%;
      background-color: transparent;
      border: none;
      outline: none;
      text-align: left;
      font-size: 16px;
      line-height: 16px;
      font-family: "Roboto Medium";
      color: var(--color);

      &::placeholder {
        color: var(--color-des);
      }
    }
  }

  &__item {
    height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &.on {
      background-color: rgba(255, 255, 255, 0.1);
    }

    img {
      width: 28px;
      margin-right: 8px;
    }

    span {
      font-size: 16px;
      color: var(--color-content);
    }
  }
}
</style>
